// pages/index/filter/filter.js
const app = getApp()
const eventListener = app.eventListener
import classes from '../../../assets/data/classes'

// 给类别加上选项“全部”
let classData = classes.map(v => {
  const label = v.label
  const children = v.children.slice()
  children.unshift('全部')
  return { label, children }
})
classData.unshift({
  label: '全部',
  children: []
})

Component({
  options: {
    styleIsolation: "apply-shared"
  },

  /**
   * 组件的属性列表
   */
  properties: {
    position: {
      type: Object
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    classOptions: [], // 类别选项
    region: [], // 地区
    displayRegion: '地区', // 地区 - 显示
    regionResult: null, // 地区 - 结果
    classes: [], // 类别
    displayClasses: '类别', // 类别 - 显示
    classesResult: null, // 类别 - 结果
    showFilter: false, // 展开筛选组件
    startTime: '', // 开始时间
    endTime: '', // 结束时间
    sort: '' // 排序条件
  },

  observers: {
    "position": function (value) {
      // 根据用户当前位置设置“地区”选项，只定位到二级地区
      if (value) {
        let region = value.region.slice(0, 2)
        let displayRegion = []
        region.forEach(v => {
          if (!displayRegion.includes(v)) {
            displayRegion.push(v)
          }
        })
        region.push('全部')
        this.setData({
          region,
          displayRegion
        })
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 向父组件发送结果
     */
    updateResult () {
      const result = {}
      // 地区
      const regionResult = this.data.regionResult
      regionResult && (result.region = regionResult)
      // 类别
      const classesResult = this.data.classesResult
      classesResult && (result.classes = classesResult)
      // 排序
      const sort = this.data.sort
      sort && (result.sort = sort)
      // 开始时间
      const startTime = this.data.startTime
      startTime && (result.startTime = startTime)
      // 结束时间
      const endTime = this.data.endTime
      endTime && (result.endTime = endTime)
      
      this.triggerEvent('change', result)
    },

    /**
     * 选择地区
     * @param {Event} event 
     */
    bindRegionChange (event) {
      const region = event.detail.value
      let displayRegion
      let regionResult
      if (region.length === 0 || !region.find(v => v !== '全部')) {
        this.setData({
          region: this.data.region
        })
      } else {
        displayRegion = []
        regionResult = []
        region.forEach(v => {
          if (v !== '全部' && !displayRegion.includes(v)) {
            displayRegion.push(v)
          }
          if (v !== '全部') {
            regionResult.push(v)
          }
        })
        this.setData({ region, displayRegion })
        this.data.regionResult = regionResult
        this.updateResult()
      }
    },
  
    /**
     * 选择类别
     * @param {Event} event 
     */
    bindClassChange (event) {
      const classes = event.detail.value
      const classOptions = this.data.classOptions
      let displayClasses
      let classesResult
      if (classes[0] === 0) {
        displayClasses = '类别'
        classesResult = null
      } else {
        displayClasses = [classOptions[0][classes[0]]]
        classes[1] && classes[1] !== 0 && displayClasses.push(classOptions[1][classes[1]])
        classesResult = displayClasses
      }

      this.setData({ classes, displayClasses })
      this.data.classesResult = classesResult
      this.updateResult()
    },
  
    /**
     * 切换一级类别
     * @param {Event} event 
     */
    bindClassColumnChange (event) {
      const { column, value } = event.detail
      if (column === 0) {
        this.setData({
          'classOptions[1]': classData[value].children
        })
      }
    },

    /**
     * 点击筛选组件
     * @param {Event} event 
     */
    bindOtherFilter (event) {
      const id = event.currentTarget.id
      if (id !== 'otherFilter') {
        this.setData({
          showFilter: !this.data.showFilter
        })
      }
    },

    /**
     * 改变筛选条件
     * @param {Event} event 
     */
    bindChangeValue (event) {
      const key = event.currentTarget.dataset.key
      const value = event.detail.value
      this.setData({ [key]: value })
      this.updateResult()
    },

    /**
     * 清除筛选条件
     */
    bindClear () {
      this.setData({
        sort: '',
        startTime: '',
        endTime: ''
      })
      this.updateResult()
    },

    /**
     * 确定筛选条件
     */
    bindConfirm () {
      this.setData({ showFilter: false })
    }
  },

  lifetimes: {
    attached () {
      // 初始化类别选项
      this.setData({
        classOptions: [
          classData.map(v => v.label),
          classData[0].children
        ]
      })

      // 监听页面点击事件
      eventListener.addListener('clickCurrentPage', (event) => {
        // 收起筛选组件
        this.setData({
          showFilter: false
        })
      })
    }
  }
})
